<template>
  <div class="indexContriner">
      <div class="playvideo-left">
      <ElButton class="play-btn" :icon="Close" circle @click="goback"></ElButton>
      <video class="play-video" :src="Url" autoplay controls />
      
      <!-- <ElButton class="play-pige" :icon="ArrowUp" circle></ElButton>
      <template></template>
      <ElButton class="play-next" :icon="ArrowDown" circle></ElButton> -->
      </div>
      <ElScrollbar>
            <div class="play-right">
      <div class="left-btn">&lt;</div>
      <div class="right-btn">></div>
          <div class="profile-user">
            <img class="avatar-img" src="../../static/image/img_avatar.1d4c4a34.gif">
            <div>
            <span class="profile-left">社交牛逼症</span>
            <span class="profile-right">1小时</span>
            </div>
            <ElButton class="play-right-btn" color="#FE3666" :icon="Plus" round>关注</ElButton>
          </div>
          <p class="play-p">
          社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症
          社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症
          </p>
          <div class="intera">
          <div><img class="intera-img" src="../../static/image/爱心.png">5.1w</div>
          <div><img class="intera-img" src="../../static/image/分享.png">分享</div>
          <div><img class="intera-img" src="../../static/image/不感兴趣.png">不感兴趣</div> 
          </div>
             <div class="comment-input">
              <img class="input-img" src="../../static/image/img_avatar.1d4c4a34.gif" alt="">
              <div class="input-container">
              <textarea class="input-text"  placeholder="说点什么..." />
              </div>
              <div class="input-btn">
              <ElButton round>取消</ElButton>
              <ElButton color="#FE3666" round>确定</ElButton>
              </div>
            </div>
            
            <div class="commit-list">
            <ul>
                <li>
                    <div class="item">
                    <div>
                    <img class="input-img" src="../../static/image/img_avatar.1d4c4a34.gif" />
                    </div>
                          <div class="item-text">
                          <span class="item-left">社交牛逼症</span>
                          <span class="item-right">1小时</span>
                          </div>
                    </div>
                    <span class="item-span">社交牛逼症</span>
                    <div class="item-warp">
                    <span>社交牛逼症社交牛逼症社交牛逼症:xxxxx</span>
                    <div class="intera">
                        <div><img class="intera-img" src="../../static/image/爱心.png">喜欢</div>
                        <div><img class="intera-img" src="../../static/image/回复.png">回复</div>
                    </div>
                    </div>
                </li>
              </ul>
            </div>
       </div>
      </ElScrollbar>
      <div class="play-right">
      <div class="left-btn">&lt;</div>
      <div class="right-btn">></div>
          <div class="profile-user">
            <img class="avatar-img" src="../../static/image/img_avatar.1d4c4a34.gif">
            <div>
            <span class="profile-left">社交牛逼症</span>
            <span class="profile-right">1小时</span>
            </div>
            <ElButton class="play-right-btn" color="#FE3666" :icon="Plus" round>关注</ElButton>
          </div>
          <p class="play-p">
          社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症
          社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症社交牛逼症
          </p>
          <div class="intera">
          <div><img class="intera-img" src="../../static/image/爱心.png">5.1w</div>
          <div><img class="intera-img" src="../../static/image/分享.png">分享</div>
          <div><img class="intera-img" src="../../static/image/不感兴趣.png">不感兴趣</div> 
          </div>
             <div class="comment-input">
              <img class="input-img" src="../../static/image/img_avatar.1d4c4a34.gif" alt="">
              <div class="input-container">
              <textarea class="input-text"  placeholder="说点什么..." />
              </div>
              <div class="input-btn">
              <ElButton round>取消</ElButton>
              <ElButton color="#FE3666" round>确定</ElButton>
              </div>
            </div>
            
            <div class="commit-list">
            <ul>
                <li>
                    <div class="item">
                    <div>
                    <img class="input-img" src="../../static/image/img_avatar.1d4c4a34.gif" />
                    </div>
                          <div class="item-text">
                          <span class="item-left">社交牛逼症</span>
                          <span class="item-right">1小时</span>
                          </div>
                    </div>
                    <span class="item-span">社交牛逼症</span>
                    <div class="item-warp">
                    <span>社交牛逼症社交牛逼症社交牛逼症:xxxxx</span>
                    <div class="intera">
                        <div><img class="intera-img" src="../../static/image/爱心.png">喜欢</div>
                        <div><img class="intera-img" src="../../static/image/回复.png">回复</div>
                    </div>
                    </div>
                </li>
              </ul>
            </div>
       </div>
    </div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
  name:'PlayjcVideo'
})
</script>
<script lang="ts" setup>
import {ElButton,ElScrollbar} from 'element-plus'
import {Close,ArrowUp,ArrowDown,Plus } from '@element-plus/icons'
import {ref,onMounted} from 'vue'
import {useRoute} from 'vue-router'
import router from '@/router'
import {MvListApi} from '@/api/Mv';
const Url=ref('');
const goback=()=>{
  router.push({
    path:'/theater'
  });

}
onMounted(async () => {
    const result=await MvListApi(id);
    Url.value=result.data.url
    console.log(result);
    

})
const route=useRoute();
const id=route.query.id;
</script>

<style lang="less">
*{
  margin: 0;
  padding: 0;
}
.indexContriner{
  position: relative;
  width: 100%;
  height: 100%;
}
.playvideo-left{
  height: 100%;
  width: 100%;
}
.play-btn{
  position: fixed;
  top: 30px;
  left: 30px;
  width: 56px;
  height: 56px;
}
.play-video{
  position: fixed;
  top: 0;
  left: 200px;
  width: 800px;
  height: 600px;
}
.play-pige{
  position: absolute;
  left: 48%;
  top: 550px;
  width: 56px;
  height: 56px;
  color: #999;
}
.play-next{
  position: absolute;
    left: 48%;
    top: 630px;
    width: 56px;
    height: 56px;
      color: #999;
}
.left-text{
  position: fixed;
  top: 35px;
  left: 632px;
  z-index: 100;
  background-color: transparent;
}
.play-right{
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 630px;
  padding: 40px;
  background-color: #222;
}

.right-btn{
  position: fixed;
  top: 50%;
  left: 1045px;
  width: 25px;
  height: 50px;
  line-height: 50px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  color: #fff;
  background-color: #292929;
}
.left-btn{
  position: fixed;
  top: 50%;
  left: 1002px;
  width: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  color: #fff;
  background-color: #292929;
  display: none;
}
.profile-user{
  display: flex;
  align-items: center;
  width: 382px;
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  }
.play-right-btn{
 position: absolute;
 top: 40px;
 right:40px;
}
.avatar-img{
  width: 40px;
  height: 40px;
  margin-right:14px;
  border-radius: 50%;
}
.profile-left{
font-size: 16px;
color: #999;
margin-right:14px;
}
.profile-right{
  color: #999;
font-size: 12px;
}
.intera{
  height: 20px;
  line-height: 20px;
  display: flex;
  padding: 16px 0 40px ;
}
.intera div{
  margin-right: 23px;
}
.play-p{
  width: 382px;
  height: auto;
  color: #fff;
  font-size: 17px;
}
.intera-img{
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 10px;
}
.intera div{
  color: #999;
}
.comment-input{
  display: flex;
  position: relative;
  width: auto;
  height: 158px;
  margin-bottom: 24px;
}
.input-container{
  margin-left: 10px;
  background-color: #292929;
}
.input-img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.input-text{
  padding: 8px;
  font-size: 16px;
  height: 90px;
  width: 344px;
  background-color: #292929;
}
.input-btn{
  position: absolute;
  bottom: 10px;
  right: 0;
  height: 32px;
}
.commit-list{
  width: 382px;
}
.item{
  display: flex;
  align-items: center;
}
ul{
  list-style: none;
}
.item-warp{
  padding: 14px;
  margin: 19px 0 0 38px;
  background-color: #292929;
}
.item-left{
  margin-left: 10px;
}
.item-right{
  margin-left: 8px;
}
.item-span{
  margin-left: 38px;
  padding-top: 9px;
  height: 32px;
}
</style>